<template>
  <div class="trendPage secondary-page-mode">
    <div class="secondary-toolbar">
        <span>时间类型 : </span>
         <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
          <span>数据类型 : </span>
         <div class="layoutBox" style="width:120px">
            <el-select v-model="value1" placeholder="请选择">
                  <el-option
                    v-for="item in optionData1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
         <span>时段1({{timeType}}) : </span>
         <div class="layoutBox" style="width:242px" v-show="dateType == 'daterange'"><el-date-picker v-model="dateRange1" type="daterange" v-show="dateType == 'daterange'" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> </div>
         <div class="layoutBox" style="width:140px" v-show="dateType == 'week'" ><el-date-picker v-model="dateRange1" type="week" format="yyyy 第 WW 周" placeholder="请选择"></el-date-picker> </div>
         <div class="layoutBox" style="width:140px" v-show="dateType == 'month'"><el-date-picker v-model="dateRange1" type="month"  placeholder="请选择"></el-date-picker> </div>
         <yf-quarter v-show="dateType == 'quarter'"></yf-quarter>
         <div class="layoutBox" style="width:140px" v-show="dateType == 'year'"><el-date-picker v-model="dateRange1" type="year"  placeholder="请选择"></el-date-picker> </div>&emsp;&emsp;
         <span>时段2({{timeType}}) : </span>
         <div class="layoutBox" style="width:242px" v-show="dateType == 'daterange'"><el-date-picker v-model="dateRange1" type="daterange"  start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> </div>
         <div class="layoutBox" style="width:140px" v-show="dateType == 'week'" ><el-date-picker v-model="dateRange1" type="week" format="yyyy 第 WW 周" placeholder="请选择"></el-date-picker> </div>
         <div class="layoutBox" style="width:140px" v-show="dateType == 'month'"><el-date-picker v-model="dateRange1" type="month"  placeholder="请选择"></el-date-picker> </div>
         <yf-quarter v-show="dateType == 'quarter'" ></yf-quarter>
         <div class="layoutBox" style="width:140px" v-show="dateType == 'year'"><el-date-picker v-model="dateRange1" type="year"  placeholder="请选择"></el-date-picker> </div>&emsp;&emsp;
        <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
    </div>
    <div class="currency-mode-wrap">
           <div class="echartbox" id="echartbox">

           </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange1: "",
      dateRange2: "",
      value:'',
      value1:'',
      date1: "",
      date2: "",
      optionData: [
          { label: "日", value: 1 },
          { label: "周", value: 2 },
          { label: "月", value: 3 },
          { label: "季", value: 4 },
          { label: "年", value: 5 }
      ],
      optionData1: [
          { label: "数据值", value: 1 },
          { label: "平均值", value: 2 },
          { label: "中位值", value: 3 }
      ],
      treeConfig: {
        model: "民乐路站",
        url: "/factorybound/basic/stationTree", //请求树结构数据的链接
        params: {
          structureType: "area",
          token: "72AB3C672E9F4B5292BD775C4D50A566"
        }, //请求树结构数据的参数
        showCheckbox: false,
        iconFather: "icon-wenjianjiaa",
        iconChild: "icon-wenjiana",
        showSearch: false,
        expanded: ["5384"], //默认展开的节点
        checked: [], //默认选中的节点
        currentNode: "5384" //默认选中当前高亮节点
      },
      timeType: "日",
      dateType: "daterange"
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
  },
  mounted(){
    this.$nextTick(()=>{
           this.initEchart()
    }) 
  },
  methods: {
    selectChange(arr) {
      for (let i in this.optionData) {
        if (arr == this.optionData[i].value) {
          this.timeType = this.optionData[i].label;
        }
      }
      if (this.timeType == "日") {
        this.dateType = "daterange";
      } else if (this.timeType == "周") {
        this.dateType = "week";
      } else if (this.timeType == "月") {
        this.dateType = "month";
      } else if (this.timeType == "季") {
        this.dateType = "quarter";
      } else if (this.timeType == "年") {
        this.dateType = "year";
      }
    },
    initEchart() { 
      var option = {
        title: {
          text: "水温变化分析图",
          left: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [
            "2019-01-20",
            "2019-01-21",
            "2019-01-22",
            "2019-01-23",
            "2019-01-24",
            "2019-01-25",
            "2019-01-26",
            "2019-01-27",
            "2019-01-28"
          ],
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          splitNumber: 3,
          name: "监测值",
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "时段1",
            type: "line",
            data: [100, 80, 50, 85, 90, 40, 50, 60, 270],
            itemStyle: {
              normal: {
                color: "#c23531"
              }
            },
          },
          {
            name: "时段2",
            type: "line",
            data: [200, 180, 150, 185, 190, 140, 150, 160, 60],
            itemStyle: {
              normal: {
                color: "#c23531"
              }
            },
          },
        ]
      };
      var myChart = this.$echarts.init(document.getElementById("echartbox"));

      //使用制定的配置项和数据显示图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scope lang="less">
 .echartbox {
    margin-top: 5px;
    height: 450px;
  }
</style>
